<template>
  <div class="user-brand">
    <div class="user-title">
      <h4>网站展示品牌：</h4>
    </div>
    <div v-for="(item,index) in brandList" :key="index" class="brand clearfix">
      <div class="brand-img left">
        <img :src="item.logo" alt="">
      </div>
      <div class="introduce left">
        <h3>{{ item.brandName }} <i :class="item.icon" /></h3>
        <p>{{ item.name }}</p>
        <span>{{ item.time }}</span>
      </div>
      <button class="right" @click="edit">编辑品牌信息</button>
    </div>
  </div>
</template>

<script>
export default {
  name: 'UserBrand',
  data() {
    return {
      brandList: [
        {
          logo: require('../../../../assets/img/template-item2/brands/2.png'),
          brandName: '三菱电动车',
          name: '三菱有限公司',
          time: '认领时间：2019年5月22',
          icon: 'font_family icon-icon_renzhengbianzhi'
        },
        {
          logo: require('../../../../assets/img/template-item2/brands/2.png'),
          brandName: '三菱电动车',
          name: '三菱有限公司',
          time: '认领时间：2019年5月22',
          icon: 'font_family icon-icon_renzhengbianzhi'
        },
        {
          logo: require('../../../../assets/img/template-item2/brands/2.png'),
          brandName: '三菱电动车',
          name: '三菱有限公司',
          time: '认领时间：2019年5月22',
          icon: 'font_family icon-icon_renzhengbianzhi'
        }
      ]
    }
  },
  methods: {
    edit() {
      this.$router.push('/vMain/editBrand')
    }
  }
}
</script>

<style lang="scss" scoped>
.user-brand{
  .user-title{
    width:937px;
    height:60px;
    background:#F8F1F1;
    h4{
      font-size:18px;
      margin-left: 18px;
      font-weight:bold;
      line-height:60px;
    }
  }
  .brand{
    margin-top: 30px;
    border-bottom: 1px solid #ECECEC;
    padding-bottom: 34px;
    .brand-img{
      width: 198px;
      height: 112px;
      display: flex;
      align-items: center;
      justify-content: center;
      img{
        width: 154px;
        height: 90px;
      }
    }
    .introduce{
      margin-left: 10px;
      h3{
        font-size:22px;
        font-weight:bold;
        line-height:29px;
        i{
          font-weight: 400;
          font-size: 25px;
          color: #C8A762;
        }
      }
      p{
        font-size:18px;
        font-weight:600;
        line-height:24px;
        margin: 12px 0;
      }
      span{
        font-size:16px;
        line-height:21px;
        color:#787878;
      }
    }
    >button{
      width:126px;
      height:34px;
      background:#DC3535;
      border-radius:4px;
      color: #FFF;
      margin-top: 30px;
    }
  }
}
</style>
